<template>
  <div class="header-container">
    <div class="header-left">
      <el-icon class="icon" size="20" @click="headData.changeCollapse()">
        <Fold />
      </el-icon>
      <ul class="flex-box">
        <li
          v-for="(item, index) in selectMenu"
          :key="item.path"
          :class="{ selected: item.path === route.path }"
          class="flex-box"
        >
          <el-icon class="tabicon" size="20">
            <component :is="item.icon" />
          </el-icon>
          <router-link :to="{ path: item.path }"
            >{{ $t(`messages.${item.title}`) }}
          </router-link>
          <el-icon
            class="tabicon close"
            @click="closeTab(item, index)"
            size="20"
          >
            <Close />
          </el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right">
      <el-dropdown placement="bottom-start" style="margin-right: 20px">
        <el-button> {{ $t("messages.switchLanguage") }} </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="changeLanguage('zh')"
              >中文</el-dropdown-item
            >
            <el-dropdown-item @click="changeLanguage('en')"
              >English</el-dropdown-item
            >
            <el-dropdown-item @click="changeLanguage('ft')"
              >繁體</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dropdown>
        <div class="el-dropdown-link flex-box">
          <el-avatar size="large" :src="userList.imgUrl" />
          <p class="username">你好，{{ userList.account }}</p>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toBack">退出登录</el-dropdown-item>
            <el-dropdown-item>切换主题</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { headStore } from "@/stores/headStore.js";
import { useRoute, useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { getUserCenter } from "@/api/index.js";
//引入i18n
import { useI18n } from "vue-i18n";
const { locale } = useI18n();

// 当前的路由对象
const route = useRoute();
const router = useRouter();
const headData = headStore();
const selectMenu = computed(() => headData.selectMenu);
const userList = ref({});
//  切换语言
const changeLanguage = (type) => {
  locale.value = type;
};
const toBack = () => {
  router.push("/login");
  localStorage.removeItem("t_k");
};
const closeTab = (item, index) => {
  headData.closeMenuAction(item);
  // 删除非当前页的tag
  if (route.path !== item.path) {
    return;
  }
  // 删除当前页的tag

  const selectMenuData = selectMenu.value;
  // 如果删除的是最后一项
  if (index === selectMenuData.length) {
    // 如果只有一个tag
    if (!selectMenuData.length) {
      router.push("/dashboard/home");
    } else {
      router.push({
        path: selectMenuData[index - 1].path,
      });
    }
  }
  // 如果删除的是中间的tag
  else {
    router.push({ path: selectMenuData[index].path });
  }
};
onMounted(() => {
  getUserCenter().then((res) => {
    console.log(res.accountInfo);
    userList.value = res.accountInfo;
    console.log("🚀 ~ ", userList.value);
  });
});
</script>

<style lang="less">
a {
  text-decoration: none;
  color: @primary-color;
}
.flex-box {
  display: flex;
  align-items: center;
}
.header-container {
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  background: #ffffff;
  padding-left: 20px;
  .header-left {
    height: 100%;
    display: flex;
    align-items: center;
    .icon {
      margin-right: 20px;
      cursor: pointer;
      font-size: 35px !important;
      height: 100%;
    }
    .icon :hover {
      color: @tab-color;
    }
    ul {
      height: 100%;

      li {
        margin-right: 5px;
        transition: all 0.2s;
        padding-left: 5px;
        padding-right: 5px;
        height: 100%;
        font-size: 17.4px;
        .tabicon {
          margin: auto 2px;
        }
        .close {
          visibility: hidden;
        }

        &.selected {
          background: #f6f6f6;
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
          font-weight: 700;
          color: @tab-color;
          a {
            color: @tab-color;
          }
          .close {
            visibility: visible;
          }
        }
      }
      li:hover {
        .close {
          visibility: visible;
        }
      }
      li:hover {
        a {
          color: @tab-color;
        }
      }

      li:hover {
        background: #f6f6f6;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        font-weight: 700;
        color: @tab-color;
      }
    }
  }
  .header-right {
    padding-right: 20px;
    display: flex;
    align-items: center;
  }
}
</style>
